<template>
  <div class="users">
    <!-- 搜索框 -->
    <Input
      search
      autofocus
      enter-button="搜索"
      width="100px"
      placeholder="请输入账户名或昵称"
      v-model="userdata"
      @on-search="searchUser(userdata)"
    />

    <!-- 添加按钮 -->
    <Button
      type="error"
      style="position: relative; top:-34px;left:60% ;display:
      table;"
      @click="modal2 = true"
    >添加</Button>


    <Modal
      v-model="modal2"
      title="添加"
      @on-ok="addSubmit"
      @on-cancel="addCancel"
    >
      <!-- 添加页面 -->
        <tianjia ref="tianjia" @success="searchUser"></tianjia>
    </Modal>

    <!-- 用户列表 -->
    <Table
      border
      :columns="columns12"
      :data="data6"
    >
      <template
        slot-scope="{ row }"
        slot="u_name"
      >
        <span>{{ row.u_name}}</span>
      </template>
      <template
        slot-scope="{ row }"
        slot="u_status"
      >
        <span>{{ row.u_status==1?'正常使用':'停止使用'}}</span>
      </template>

      <template
        slot-scope="{ row }"
        slot="u_nick"
      >
        <span>{{ row.u_nick}}</span>
      </template>
      <template
        slot-scope="{ row }"
        slot="u_sex"
      >
        <span>{{ row.u_sex}}</span>
      </template>
       <template
        slot-scope="{ row }"
        slot="u_photo"
      >
        <img style="width:60px;heihgt:60px;" :src="row.u_photo" alt="用户头像">
      </template>
      <template
        slot-scope="{ row }"
        slot="u_phone"
      >
        <span>{{ row.u_phone}}</span>
      </template>
      <template
        slot-scope="{ row }"
        slot="r_id"
      >
        <span>{{ row.r_id}}</span>
      </template>

      <template
        slot-scope="{ row}"
        slot="action"
      >
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="senddata(row)"
        >修改</Button>

        <Button
          type="error"
          size="small"
          @click="senddata2(row)"
        >删除</Button>
        <Modal
          v-model="modal3"
          title="确实要删除?"
          @on-ok="remove(index)"
        >
        </Modal>

      </template>

    </Table>

    <!-- 分页 -->
    <Page :total="data6.length" />

    <!-- 修改弹出框 -->
    <Modal
      v-model="modal1"
      title="修改"
      @on-ok="handleSubmit"
      @on-cancel="handleCancel"
      width=400px
    >
        <ModInfo :modify="userdata1" ref="ModInfo"
        ></ModInfo>
    </Modal>
  </div>
</template>

<script>
import ModInfo from './ModInfo'
import tianjia from './tianjia'
export default {
  data() {
    return {
      iscomponent: '',
      modal1: false,
      modal2: false,
      modal3: false,
  
      columns12: [{
        align: 'center',
        title: '账号',
        slot: 'u_name',
        slot: 'u_name',
      },
       {
        align: 'center',
        title: '状态',
        slot: 'u_status',
        key: 'u_status',
      },
      {
        align: 'center',
        title: '昵称',
        slot: 'u_nick',
        key: 'u_nick',
      },
      {
        align: 'center',
        title: '性别',
        slot: 'u_sex',
        key: 'u_sex',
      },
      {
        align: 'center',
        title: '头像',
        slot: 'u_photo',
        key: 'u_photo',
      },
      {
        align: 'center',
        title: '电话',
        slot: 'u_phone',
        key: 'u_phone',
      },
      {
        align: 'center',
        title: '角色id',
        slot: 'r_id',
        key: 'r_id',
      },
      {
        title: '操作',
        slot: 'action',
        width: 250,
        align: 'center',
      },
      ],
      data6: [],
      userdata: '',
      userdata1: {},
      userdata2: [],
      selectInde: 0,
    }
  },
  created() {
    this.searchUser()
  },
  methods: {
    async handleSubmit(){
      this.Api.UpdateUserInfo(this.$refs.ModInfo.modify).then((res) => {
        if (res.data.status == 200) {
          this.$Message.success('修改成功！')
          this.searchUser()
        } else {
          this.$Message.error('失败!')
        }
      })
    },
    handleCancel(){
      this.modal1=false
    },
    async searchUser(userdata) {
      //console.log(userdata);
      try {
        const res = await this.Api.searchUser(this.userdata)
        this.data6 = res.data.data
      } catch (error) {
        console.log('数据请求失败', error)
      }
    },
    addSubmit() {
       var userData = {
        name: this.$refs['tianjia'].formValidate.name,
        photo: this.$refs['tianjia'].formValidate.photo,
        nick: this.$refs['tianjia'].formValidate.nick,
        phone: this.$refs['tianjia'].formValidate.phone,
        email: this.$refs['tianjia'].formValidate.email,
        sex: this.$refs['tianjia'].formValidate.sex,
        pwd: this.$refs['tianjia'].formValidate.pwd,
      }
      // console.log(this.formValidate)
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.Api.Register(userData).then((msg) => {
            if (msg.data.status == 200) {
              this.$Message.success('添加成功！')
              this.searchUser()
            }
          })
        } else {
          this.$Message.error('失败!')
        }
      })
    },
    addCancel() {
      this.$Message.info('点击取消')
    },
    remove() {
      var userData = {
        id: this.userdata2.u_id,
        name: this.userdata2.u_name,
        nick: this.userdata2.u_nick,
        phone: this.userdata2.u_phone,
        email: this.userdata2.u_email,
        sex: this.userdata2.u_sex,
        pwd:'',
        status: this.userdata2.u_status = '0',
      }
      this.Api.UpdateUserInfo(userData).then((res) => {
        if (res.data.status == 200) {
          this.$Message.success('修改成功！')
          this.searchUser()
        } else {
          this.$Message.error('失败!')
        }
      })
    },
    senddata2(row) {
      // console.log(row)
      this.modal3 = true
      this.userdata2 = row
    },
    senddata(row) {
      // console.log(index)
      this.modal1 = true
      row['u_pwd']=''
      this.userdata1 = JSON.parse(JSON.stringify(row))

    },
  },
  watch: {},
  components: {
    ModInfo,
    tianjia,
  },
  watch: {},
}
</script>

<style>
.users {
  z-index: 9;
  margin-bottom: 30px;
  padding: 10px;
}

.ivu-poptip-body {
  padding-left: 22px;
}

.ivu-poptip-content {
  text-align: left;
}

.ivu-input-group {
  width: 50%;
}

.ivu-modal-mask {
  background-color: rgba(0, 0, 0, 0.3);
}

.ivu-table td {
  height: 44px;
}
</style>
